<template>
  <div class="my-pets">
    <div class="container">
      <h1 class="page-title">我的宠物</h1>
      
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>
      
      <div v-else-if="adoptedPets.length === 0" class="empty-container">
        <el-empty description="您还没有成功领养宠物">
          <router-link to="/pets">
            <el-button type="primary">去看看宠物</el-button>
          </router-link>
        </el-empty>
      </div>
      
      <div v-else class="pet-grid">
        <div v-for="pet in adoptedPets" :key="pet.id" class="pet-card-wrapper">
          <el-card class="pet-card">
            <div class="pet-card-content">
              <div class="pet-image-container">
                <img :src="getPetImageUrl(pet)" :alt="pet.name" class="pet-image">
              </div>
              
              <div class="pet-info">
                <h3 class="pet-name">{{ pet.name }}</h3>
                
                <div class="pet-meta">
                  <div class="meta-item">
                    <span class="meta-label">类别:</span>
                    <span class="meta-value">{{ getCategoryName(pet.category_id) }}</span>
                  </div>
                  <div class="meta-item">
                    <span class="meta-label">品种:</span>
                    <span class="meta-value">{{ pet.breed || '未知' }}</span>
                  </div>
                  <div class="meta-item">
                    <span class="meta-label">性别:</span>
                    <span class="meta-value">{{ formatGender(pet.gender) }}</span>
                  </div>
                  <div class="meta-item">
                    <span class="meta-label">年龄:</span>
                    <span class="meta-value">{{ formatAge(pet.age) }}</span>
                  </div>
                </div>
                
                <div class="adoption-info">
                  <span class="adoption-label">领养日期:</span>
                  <span class="adoption-date">{{ formatDate(pet.adoption_date) }}</span>
                </div>
              </div>
            </div>
            
            <div class="pet-card-footer">
              <el-button 
                type="primary" 
                plain 
                @click="viewPetDetails(pet.id)"
              >
                查看详情
              </el-button>
              <el-button 
                type="success" 
                @click="openFeedbackDialog(pet)"
              >
                发布近况
              </el-button>
            </div>
          </el-card>
        </div>
      </div>
      
      <!-- 发布近况对话框 -->
      <el-dialog
        title="发布宠物近况"
        v-model="feedbackDialogVisible"
        width="500px"
      >
        <div v-if="selectedPet" class="feedback-dialog-content">
          <div class="selected-pet-info">
            <div class="pet-image-small-container">
              <img :src="getPetImageUrl(selectedPet)" :alt="selectedPet.name" class="pet-image-small">
            </div>
            <div class="selected-pet-name">
              {{ selectedPet.name }}
            </div>
          </div>
          
          <el-form :model="feedbackForm" label-position="top">
            <el-form-item label="近况描述">
              <el-input
                type="textarea"
                v-model="feedbackForm.content"
                placeholder="分享一下宠物的生活近况..."
                :rows="4"
              />
            </el-form-item>
            
            <el-form-item label="上传照片">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handlePhotoChange"
                :on-remove="handlePhotoRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <div class="upload-tip">
                <small>* 照片将在管理员审核后显示</small>
              </div>
            </el-form-item>
          </el-form>
        </div>
        
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="feedbackDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitFeedback" :loading="submittingFeedback">
              提交
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'MyPets',
  data() {
    return {
      feedbackDialogVisible: false,
      selectedPet: null,
      submittingFeedback: false,
      feedbackForm: {
        content: '',
        photos: []
      }
    };
  },
  computed: {
    ...mapGetters({
      adoptedPets: 'adoptions/getMyAdoptedPets',
      loading: 'isLoading',
      categories: 'categories/allCategories'
    })
  },
  async created() {
    // 确保类别数据已加载
    if (this.categories.length === 0) {
      await this.fetchCategories();
    }
    
    // 获取已领养宠物
    await this.fetchMyAdoptedPets();
  },
  methods: {
    ...mapActions({
      fetchMyAdoptedPets: 'adoptions/fetchMyAdoptedPets',
      fetchCategories: 'categories/fetchCategories'
    }),
    formatGender(gender) {
      const genderMap = {
        'male': '公',
        'female': '母',
        'unknown': '未知'
      };
      return genderMap[gender] || '未知';
    },
    formatAge(age) {
      if (!age) return '未知';
      return `${age} 岁`;
    },
    formatDate(dateString) {
      if (!dateString) return '未知';
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN');
    },
    getCategoryName(categoryId) {
      if (!categoryId) return '未知';
      const category = this.categories.find(c => c.id === categoryId);
      return category ? category.name : '未知';
    },
    getPetImageUrl(pet) {
      if (!pet || !pet.image_url) {
        return 'https://via.placeholder.com/300x300?text=No+Image';
      }
      
      const apiUrl = process.env.VUE_APP_API_URL || 'http://localhost:3000';
      return `${apiUrl}${pet.image_url}`;
    },
    viewPetDetails(petId) {
      this.$router.push(`/pets/${petId}`);
    },
    openFeedbackDialog(pet) {
      this.selectedPet = pet;
      this.feedbackForm = {
        content: '',
        photos: []
      };
      this.feedbackDialogVisible = true;
    },
    handlePhotoChange(file) {
      this.feedbackForm.photos.push(file);
    },
    handlePhotoRemove(file) {
      const index = this.feedbackForm.photos.indexOf(file);
      if (index !== -1) {
        this.feedbackForm.photos.splice(index, 1);
      }
    },
    submitFeedback() {
      if (!this.feedbackForm.content.trim()) {
        this.$message.warning('请输入近况描述');
        return;
      }
      
      this.submittingFeedback = true;
      
      // 模拟提交
      setTimeout(() => {
        this.submittingFeedback = false;
        this.feedbackDialogVisible = false;
        
        this.$message({
          type: 'success',
          message: '近况已提交，感谢您的分享！'
        });
      }, 1000);
    }
  }
}
</script>

<style lang="scss" scoped>
.my-pets {
  padding: 40px 0;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.pet-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pet-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pet-image-container {
  margin-bottom: 15px;
}

.pet-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.pet-info {
  flex-grow: 1;
}

.pet-name {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--secondary-color);
}

.pet-meta {
  margin-bottom: 15px;
}

.meta-item {
  display: flex;
  margin-bottom: 8px;
}

.meta-label {
  font-weight: bold;
  width: 60px;
  color: var(--gray-color);
}

.meta-value {
  flex-grow: 1;
}

.adoption-info {
  display: flex;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px dashed #eee;
}

.adoption-label {
  font-weight: bold;
  margin-right: 10px;
  color: var(--primary-color);
}

.adoption-date {
  color: var(--text-color);
}

.pet-card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.feedback-dialog-content {
  .selected-pet-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
  }
  
  .pet-image-small-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
  }
  
  .pet-image-small {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .selected-pet-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--secondary-color);
  }
  
  .upload-tip {
    color: var(--gray-color);
    margin-top: 5px;
  }
}
</style> 